<template>
  <div>
    <span>男女与否：</span>
    <select name="sex" v-model="s">
      <option value="0">全部</option><!-- :selected="0 === s"-->
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
    <span>商家与否：</span>
    <select name="business" v-model="b">
      <option value="0">全部</option><!-- :selected="0 === b"-->
      <option value="1">商家</option>
      <option value="2">非商家</option>
    </select>
    <button class="screen-btn" @click="screenUser">筛选</button>
    <input type="text" class="search-text" placeholder="请输入要查询的姓名或账号..." v-model="se">
    <button class="search-btn" @click="searchUser">搜索</button>
    <button class="add-btn" @click="addClick">添加用户</button>
  </div>
</template>

<script>
  export default {
    name: "Neck",
    props: {
      sex: {
        type: Number,
        default: 0
      },
      business: {
        type: Number,
        default: 0
      },
      searchUNameOrName: {
        type: String,
        default: ''
      }
    },
    data() { // 上面的值是需要用户选择并通过事件发射出去的,因此需要借助双向绑定,但是props不能双向绑定,所以要使用data接收(或者computed)
      return {
        s: this.sex,
        b: this.business,
        se: this.searchUNameOrName
      }
    },
    computed: {
    },
    methods: {
      screenUser() {
        this.$emit('screen', {
          s: this.s,
          b: this.b,
          search: this.se
        })
      },
      searchUser() {
        this.$emit('search', {
          s: this.s,
          b: this.b,
          search: this.se
        })
      },
      addClick() {
        this.$router.push('/admin/user/add')
      }
    }
  }
</script>

<style scoped>
  div select {
    width: 100px;
    height: 30px;
    margin-right: 20px;

    border-radius: 4px;
    border: 1px solid #cdcdcd;
    background-color: #fff;
  }
  div .screen-btn {
    height: 30px;
    width: 60px;
    color: white;
    border-radius: 4px;

    outline: none;
    border: none;
    background-color: #007bff;
  }
  div .screen-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  div .search-text {
    width: 200px;
    height: 28px;
    transform: translateX(120px);
  }
  div .search-btn {
    height: 32px;
    width: 60px;
    color: white;
    border-radius: 4px;
    background-color: #007bff;
    transform: translateX(130px);

    outline: none;
    border: none;
  }
  div .search-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
  div .add-btn {
    transform: translateX(435px);

    height: 30px;
    width: 80px;
    color: white;
    border-radius: 4px;
    background-color: #28a745;

    outline: none;
    border: none;
  }
  div .add-btn:hover {
    cursor: pointer;
    opacity: 0.75;
  }
</style>